<template>
    <div class="playList">
        <!--歌单主要信息-->
        <div class="playList_info" ref="playList_info">
            <div class="info_left">
                <img :src="playListDetail.coverImgUrl" alt="">
            </div>
            <div class="info_right">
                <div class="nameArea">
                    <div class="nameArea_left">
                        <div class="tips">歌单</div>
                        <div class="name">{{playListDetail.name}}</div>
                    </div>
                    <div class="nameArea_right">
                        <div class="songsCount">歌曲数<br>{{playListDetail.trackCount}}</div>
                        <div class="playCount">播放数<br>{{playListDetail.playCount | playCountFormat}}</div>
                    </div>
                </div>
                <!--歌单创建信息-->
                <div class="createInfo">
                    <img :src="creator.avatarUrl" alt="" >
                    <div class="nickname">{{creator.nickname}}</div>
                    <div class="createTime">{{createTime}}创建</div>
                </div>
                <!--歌单操作-->
                <operation :subscribedCount = "subscribedCount" :shareCount = "shareCount" />
                <!--标签-->
                <div class="tags">
                    标签：
                    <div class="tag_item " 
                    :class="index< playListDetail.tags.length-1 ? 'line' : ''"
                    v-for="(item,index) in playListDetail.tags"
                    :key="index"
                    >
                    {{item}}
                    </div>
                </div>
                <!--简介-->
                <div class="description">
                    <div class="content" ref="content" v-html="description"></div>
                    <div class="iconfont iconjiantou showMore" @click="showMore" ref="more"></div>
                </div>
            </div>

        </div>
        <!--tabbar 切换显示-->
        <div class="tabbar">
            <div class="tabbar_item"
            v-for="(item,index) in tabbarList" :key="index"
            :class="index == tabbarFlag ? 'tabarLight' : ''"
            @click="changeMenu(index)"
            >
                {{item}}
            </div>
        </div>
        <!--歌曲列表-->
        <musicList :songList = songList :playListId = 'playListId' v-if="tabbarFlag==0" />
        <!--歌单评论列表-->
        <playListComment v-if="tabbarFlag==1"/>
        <!--歌单收藏者-->
        <subscribers  v-if="tabbarFlag==2 && subscribedCount != 0" :subscribedCount = "subscribedCount"/>
    </div>
</template>

<script>
import {_getPlaylistDetail} from '../../network/detail'
import {_getSongtDetail,_getPlaylistComment} from '../../network/detail'
import {dateFomat,_playCountFormat} from '../../util/tool'
import musicList from '../../components/content/playList/musicList'
import subscribers from '../../components/content/personRecom/subscribers'
import playListComment from '../../components/content/playList/playListComment'
import operation from '../../components/content/playList/operation'
export default {
    name: 'PlayList',
    props: [

    ],
    data() {
        return {
            playListDetail:{},
            //创建者信息
            creator:{

            },
            playListId:this.$route.query.id,
            //歌单创建时间
            createTime:null,
            showFlag:true,
            tabbarList:['歌曲列表','评论','收藏者'],
            tabbarFlag:0,
            flag:0,
            // 歌曲列表
            songList:[],
            // 收藏数
            subscribedCount:0,
            shareCount:0,
            description:null,
        };
    },
    computed: {

    },
    created() {
        // let _this = this
        // // 获取歌详情
        // _getPlaylistDetail(this.$route.query.id)
        // .then(res => {
        //     console.log(res.data)
        //     this.playListDetail = res.data.playlist
        //     this.shareCount = res.data.playlist.shareCount
        //     this.subscribedCount = res.data.playlist.subscribedCount
        //     this.description = res.data.playlist.description ? "简介：" + res.data.playlist.description : "简介：" + "暂无" 
        //     this.creator = res.data.playlist.creator
        //     // 获取创建时间
        //     this.createTime = dateFomat(res.data.playlist.createTime)
        //     let commentount = _playCountFormat(res.data.playlist.commentCount)
        //     this.tabbarList[1] = '评论(' +commentount+")"
        //     // 获取歌曲详情
        //     for(let i of res.data.playlist.trackIds){
        //         _getSongtDetail(i.id)
        //         .then(res => {
        //             // 歌曲相关原唱，插曲等
        //             if(res.data.songs[0].alia.length > 0){
        //                 res.data.songs[0].name = res.data.songs[0].name + '(' +res.data.songs[0].alia[0] + ')'
        //             }
        //             let song = res.data.songs[0]
        //             this.songList.push(song)
        //         })
        //     }
        // })
        this.getPlaylistDetail(this.$route.query.id)
        
    },
    mounted() {

    },
    watch: {
        // $route(to,from){
        //     this.getPlaylistDetail(this.$route.query.id)
        // }
    },
    methods: {
        showMore(){
            if(this.showFlag){
                this.$refs.content.style.overflow = 'visible'
                this.$refs.content.style.display = 'block'
                this.$refs.playList_info.style.height = 'auto'
                this.showFlag = !this.showFlag
                this.$refs.more.style.transform = 'rotate(180deg)'
            }else{
                this.$refs.content.style.overflow = 'hidden'
                this.$refs.content.style.display = '-webkit-box'
                this.$refs.playList_info.style.height = '215'+'px'
                this.$refs.more.style.transform = 'rotate(0)'
                this.showFlag = !this.showFlag
            }
            
        },
        changeMenu(index){
            this.tabbarFlag = index
        },
        getPlaylistDetail(id){
            let _this = this
            _getPlaylistDetail(id)
            .then(res => {
            console.log(res.data)
            this.playListDetail = res.data.playlist
            this.shareCount = res.data.playlist.shareCount
            this.subscribedCount = res.data.playlist.subscribedCount
            this.description = res.data.playlist.description ? "简介：" + res.data.playlist.description : "简介：" + "暂无" 
            this.creator = res.data.playlist.creator
            // 获取创建时间
            this.createTime = dateFomat(res.data.playlist.createTime)
            let commentount = _playCountFormat(res.data.playlist.commentCount)
            this.tabbarList[1] = '评论(' +commentount+")"
            // 获取歌曲详情
            for(let i of res.data.playlist.trackIds){
                _getSongtDetail(i.id)
                .then(res => {
                    // 歌曲相关原唱，插曲等
                    if(res.data.songs[0].alia.length > 0){
                        res.data.songs[0].name = res.data.songs[0].name + '(' +res.data.songs[0].alia[0] + ')'
                    }
                    let song = res.data.songs[0]
                    this.songList.push(song)
                    })
                }
            })
        }
    },
    filters:{
        playCountFormat(count){
            return _playCountFormat(count)
        }
    },
    components: {
        musicList,
        playListComment,
        subscribers,
        operation
    },
};
</script>

<style scoped lang="less">
@itemecolor:#E03F40;
@infoColor:#ccc;
@more:#666666;
@textColor:#fff;
@title:20px;
.position_flex(@jc:space-between,@ai:center){
  display: flex;
  align-items: @ai;
  justify-content: @jc;
}
.btn_style{
    border-radius: 5px;
    padding: 7px;
    margin-right: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
    cursor: pointer;
    background-color: #192a56
};
.playList{
    width: 100%;
    height: calc(100vh - 49px * 2);
    background-color: #2f3640;
    overflow: auto;
    color: @textColor;
    .playList_info{ 
        .position_flex(space-around,flex-start);
        font-size: 16px;
        margin-top: 30px;
        height: auto; 
        .info_left{
            width: 200px;
            height: 200px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .info_right{
            width: calc(100% - 200px - 100px);
            // 展开隐藏部分
            height: auto;
            div{
                margin-bottom: 3px;
            }
            .nameArea{
                .position_flex;
                .nameArea_left{
                    .position_flex;
                    .tips{
                        font-size: 14px;
                        padding: 5px;
                        color: @itemecolor;
                        border: 1px solid @itemecolor
                    };
                    .name{
                        font-size: 20px;
                        position: relative;
                        margin-left: 10px;
                    
                    }
                }
                .nameArea_right{
                    .position_flex;
                    color: @infoColor;
                    div{
                        padding:0 10px;
                        border-right: 1px solid;
                    }
                }
            };
            .createInfo{
                .position_flex(flex-start);
                color: @infoColor;
                img{
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    
                };
                div{
                    margin-left: 10px;
                }
                .nickname{
                    color: #e6e1d6;
                }
            };
            .operation{
                .position_flex(flex-start);
                margin-top: 10px;
                div{
                    .btn_style;
                    
                };
                div:hover{
                    background-color: #ccc;
                }
                .playAll{
                    background-color: @itemecolor;
                }
                
            }
            .tags{
                display: flex;
                margin-top: 20px;
                .tag_item{
                    color: #00a8ff;
                }
                .line{
                    &::after{
                        content: '/';

                    }
                }
            }
            .description{
                display: flex;
                margin-top: 20px;
                .content{
                    white-space: pre-wrap;
                    line-height: 20px;
                    overflow: hidden;
                    /*必须结合的属性,当内容溢出元素框时发生的事情*/
                    text-overflow: ellipsis;/*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
                    display: -webkit-box;/*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
                    -webkit-line-clamp: 2;/*用来限制在一个块元素显示的文本的行数。*/
                    -webkit-box-orient: vertical;/*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
                }
            }
        }
    }
    .tabbar{
        .position_flex(flex-start);
        border-bottom: 1px solid;
        
        margin-top: 40px;
        .tabbar_item{
            margin-left: 50px;
            padding: 20px 0;
            cursor: pointer;
            box-sizing: border-box;
            border-bottom: 5px solid transparent;
        }
        .tabarLight{
            border-bottom: 5px solid @itemecolor;
        }
    }
}
</style>
